<template>
  <a-modal v-model:visible="visible" title="查看详情" @ok="handleOk">
    <!-- 问卷详情 -->
    <div class="question-wrap" v-if="infoData.questions">
      <div class="top">
        <div class="top__title">
          {{ infoData.title }}
        </div>
        <div class="top__other">
          <div class="top__other__start">开始时间为：{{ infoData.start_time }}</div>
          <div class="top__other__end">结束时间为：{{ infoData.end_time }}</div>
        </div>
        <div class="top__tip">
          该问卷状态为：<span style="color: red; font-weight: bold">
            <span v-if="infoData.status === 0">未发布</span>
            <span v-else-if="infoData.status === 1">进行中</span>
            <span v-else>已结束</span>
          </span>
        </div>
      </div>
      <div class="question" v-for="(item, index) in infoData.questions" :key="index">
        <div class="question__title">
          {{ Number(index) + 1 }}.
          {{ item.questionTitle }}
          <span style="color: #999; font-size: 13px">
            <span v-if="item.questionType === 1">[单选题]</span>
            <span v-else-if="item.questionType === 2">[多选题]</span>
            <span v-else>[填空题]</span>
          </span>
        </div>
        <!-- 填空题 -->
        <div class="question__fill" v-if="item.questionType === 3">输入回答</div>
        <!-- 单选题/多选题  -->
        <div class="question__chos" v-for="(chositem, index) in item.questionOption" :key="index" v-else>
          <div>- {{ chositem }}</div>
        </div>
      </div>
    </div>
    <!-- 面试详情 -->
    <div class="interview-wrap" v-else-if="infoData.details">
      <div class="top">
        <div class="top__title">
          {{ infoData.title }}
        </div>
        <div class="top__info">
          {{ infoData.information }}
        </div>
        <div class="top__tip">
          该面试状态为：<span style="color: red; font-weight: bold">
            <span v-if="infoData.status === 0">未发布</span>
            <span v-else-if="infoData.status === 1">进行中</span>
            <span v-else>已结束</span>
          </span>
        </div>
      </div>
      <div class="detail">关于面试细则：</div>
      <div v-for="(item, index) in infoData.details" :key="index">
        <div class="detail__title">
          {{ Number(index) + 1 }}.
          {{ item.title }}
          <span style="color: red; font-size: 12px">占比{{ Number(item.weight) * 10 }}%</span>
        </div>
        <div class="detail__description">
          {{ item.description }}
        </div>
      </div>
    </div>
    <!-- 其他  -->
    <div style="color: #999" v-else>还没有数据呢~</div>
  </a-modal>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  props: ['infoData'],
  setup() {
    const visible = ref<boolean>(false)
    const showModal = () => {
      visible.value = true
    }

    const handleOk = () => {
      visible.value = false
    }

    return {
      visible,
      showModal,
      handleOk
    }
  }
})
</script>

<style lang="less" scoped>
.question-wrap,
.interview-wrap {
  overflow: auto;
  height: 50vh;
}
.top {
  &__title {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 5px;
  }
  &__other {
    display: flex;
    color: #999;
    font-size: 13px;
    &__start {
      flex: 1;
      text-align: right;
      padding-right: 20px;
    }
    &__end {
      flex: 1;
    }
  }
  &__info {
    font-size: 13px;
    color: #999;
    font-weight: bold;
    text-align: center;
  }
  &__tip {
    font-size: 13px;
    color: #333;
    padding: 5px 0;
    border-bottom: 1px solid #c8c8c8;
  }
}
.question {
  padding: 5px 0;
  &__title {
    font-size: 18px;
  }
  &__chos {
    padding: 0 8px;
  }
  &__fill {
    color: #c8c8c8;
    padding: 2px 5px;
    margin: 5px;
    font-size: 12px;
    border: 1px solid #aaa;
    border-radius: 2px;
    height: 70px;
  }
}
.detail {
  padding: 5px 0;
  font-size: 17px;
  &__title {
    font-size: 15px;
  }
  &__description {
    color: #999;
    font-size: 13px;
    padding-left: 15px;
    padding-bottom: 5px;
  }
}
</style>
